<template>
    <div class="q-pa-md">
        <q-table title="明细信息" :rows="rows" :columns="columns" :pagination="paginationOptions" row-key="name">
            <template v-slot:top-right>
                <q-select v-model="selectedSalesperson" :options="salespersonOptions" label="筛选业务员" style="width: 100px"
                    @update:model-value="filterData" />
                <q-select v-model="selectedType" :options="typeOptions" label="筛选类型" style="width: 100px"
                    @update:model-value="filterData" class="q-ml-sm"/>
            </template>
            <template v-slot:body="props">
                <q-tr :props="props">
                    <!-- 遍历列信息渲染表格单元格 -->
                    <q-td v-for="column in columns" :key="column.name" :props="props">
                        {{ props.row[column.field] }}
                    </q-td>
                </q-tr>
            </template>
            <!-- 合计行 -->
            <template v-slot:bottom>
                <q-tr class="total-row">
                    <q-td colspan="7"></q-td>
                    <q-td>
                        <q-badge color="green">
                            数量合计：{{ computedTotals.数量 }}
                        </q-badge>
                    </q-td>
                    <q-td class="q-pl-xs">
                        <q-badge color="red">
                            终端量合计：{{ computedTotals.终端量 }}
                        </q-badge>
                    </q-td>
                    <q-td class="q-pl-xs">
                        <q-badge color="purple">
                            自营量合计：{{ computedTotals.自营量 }}
                        </q-badge>
                    </q-td>
                    <q-td colspan="1"></q-td>
                </q-tr>
            </template>
        </q-table>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 选中的业务员
            selectedSalesperson: "全部",
            // 选中的类型
            selectedType: "全部",
            // 分页选项
            paginationOptions: {
                rowsPerPage: 500,
            },
            // 部门信息
            department: "",
            // 所有数据
            allData: [],
            // 业务员选项
            salespersonOptions: [],
            // 类型选项
            typeOptions: [],
            // 表格列定义
            columns: [
                {
                    name: "业务员",
                    label: "业务员",
                    field: "业务员",
                    align: "center",
                    sortable: true,
                    classes: "sticky-column",
                },
                {
                    name: "类型",
                    label: "类型",
                    field: "类型",
                    align: "center",
                    sortable: true,
                },
                {
                    name: "单号",
                    label: "单号",
                    field: "单号",
                    align: "center",
                    sortable: true,
                },
                {
                    name: "客商",
                    label: "客商",
                    field: "客商",
                    align: "center",
                    sortable: true,
                },
                {
                    name: "币种",
                    label: "币种",
                    field: "币种",
                    align: "center",
                    sortable: true,
                },
                {
                    name: "料品",
                    label: "料品",
                    field: "料品",
                    align: "center",
                    sortable: true,
                },
                {
                    name: "数量",
                    label: "数量",
                    field: "数量",
                    align: "center",
                    sortable: true,
                },
                {
                    name: "终端量",
                    label: "终端量",
                    field: "终端量",
                    align: "center",
                    sortable: true,
                },
                {
                    name: "自营量",
                    label: "自营量",
                    field: "自营量",
                    align: "center",
                    sortable: true,
                },
                {
                    name: "组织",
                    label: "组织",
                    field: "组织",
                    align: "center",
                    sortable: true,
                },
            ],
            // 表格显示的行数据
            rows: [],
        };
    },
    computed: {
        computedTotals() {
            const totals = { 数量: 0, 终端量: 0, 自营量: 0 };
            this.rows.forEach(row => {
                totals.数量 += Number(row.数量) || 0;
                totals.终端量 += Number(row.终端量) || 0;
                totals.自营量 += Number(row.自营量) || 0;
            });
            return totals;
        }
    },
    async mounted() {
        try {
            // 显示加载提示
            this.$q.loading.show();
            // 获取部门信息
            this.department = this.$route.query.dep;
            // 获取所有数据
            this.allData = await this.$API.free.Bmmx.get(this.department);
            // 初始化表格数据
            this.rows = this.allData;
            // 提取业务员选项
            this.salespersonOptions = [
                ...new Set(this.allData.map((item) => item.业务员)),
            ];
            // 添加“全部”选项
            this.salespersonOptions.push("全部");
            // 提取类型选项
            this.typeOptions = [
                ...new Set(this.allData.map((item) => item.类型)),
            ];
            // 添加“全部”选项
            this.typeOptions.push("全部");
        } catch (error) {
            console.error("数据加载失败:", error);
        } finally {
            // 隐藏加载提示
            this.$q.loading.hide();
        }
    },
    methods: {
        async filterData() {
            try {
                // 显示加载提示
                this.$q.loading.show();
                let filteredRows = this.allData;
                if (this.selectedSalesperson !== "全部") {
                    filteredRows = filteredRows.filter((item) => item.业务员 === this.selectedSalesperson);
                }
                if (this.selectedType !== "全部") {
                    filteredRows = filteredRows.filter((item) => item.类型 === this.selectedType);
                }
                this.rows = filteredRows;
            } catch (error) {
                console.error("筛选数据失败:", error);
            } finally {
                // 隐藏加载提示
                this.$q.loading.hide();
            }
        },
    },
};
</script>

<style>
/* 锁定首列 */
.q-table__container {
    overflow: auto;
    /* 允许横向滚动 */
}

/* 固定首列单元格 */
.q-table td:first-child,
.q-table th:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    /* 确保列头高于数据行 */
    background: white;
    box-shadow: 4px 0 6px -4px rgba(0, 0, 0, 0.1);
    /* 增加右侧阴影分隔线 */
}

/* 修正表头层级 */
.q-table thead tr:first-child th {
    z-index: 3;
    /* 确保表头始终在最顶层 */
}
</style>
